<template>
  <div class="equipment-detail-container">
    <!-- 页面标题 -->
    <el-page-header content="我的卖出设备详情" class="page-header" />

    <!-- 加载状态 -->
    <el-skeleton v-if="isLoading" :count="3" :loading="isLoading" class="loading-skeleton" />

    <!-- 无数据提示 -->
    <el-empty 
      v-else-if="equipmentData.length === 0" 
      description="暂无卖出设备数据"
      class="empty-state"
    />

    <!-- 设备列表 -->
    <div v-else class="equipment-list">
      <el-card 
        shadow="hover" 
        class="equipment-card" 
        v-for="(item, index) in equipmentData" 
        :key="item.equipmentId + index"
      >
        <!-- 设备标题栏 -->
        <div class="equipment-header">
          <h2 class="equipment-title">
            {{ item.brand }} {{ item.model }}
            <el-tag :type="getStatusTagType(item.status)" class="status-tag ml-2">
              {{ getStatusText(item.status) }}
            </el-tag>
          </h2>
          <span class="equipment-price">¥{{ formatPrice(item.price) }}</span>
        </div>

        <!-- 设备基本信息 -->
        <div class="section equipment-base-info">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="info-label">出厂年份：</span>
              <span class="info-value">{{ item.year }}年</span>
            </div>
            <div class="info-item">
              <span class="info-label">工作小时：</span>
              <span class="info-value">{{ item.hour }}小时</span>
            </div>
            <div class="info-item">
              <span class="info-label">排放标准：</span>
              <span class="info-value">{{ item.emissionStandard || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">设备位置：</span>
              <span class="info-value">{{ item.location || '未填写' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">是否检测：</span>
              <span class="info-value">
                <el-tag :type="item.isDetected === 1 ? 'success' : 'warning'">
                  {{ item.isDetected === 1 ? '是' : '否' }}
                </el-tag>
              </span>
            </div>
            <div class="info-item">
              <span class="info-label">检测报告：</span>
              <span class="info-value">
                <el-button 
                  v-if="item.isDetected === 1 && item.detectionReportId" 
                  type="text" 
                  @click="viewReport(item.detectionReportId)"
                  class="report-btn"
                >
                  查看报告
                </el-button>
                <span v-else>无</span>
              </span>
            </div>
          </div>
        </div>

        <!-- 订单信息（新增） -->
        <div class="section equipment-order" v-if="item.order">
          <h3 class="section-title">交易订单信息</h3>
          <div class="order-info-card">
            <div class="order-grid">
              <div class="order-item">
                <span class="order-label">订单编号：</span>
                <span class="order-value">{{ item.order.orderId }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">订单状态：</span>
                <span class="order-value">
                  <el-tag :type="getOrderStatusTagType(item.order.orderStatus)">
                    {{ getOrderStatusText(item.order.orderStatus) }}
                  </el-tag>
                </span>
              </div>
              <div class="order-item">
                <span class="order-label">订单金额：</span>
                <span class="order-value">¥{{ formatPrice(item.order.orderAmount) }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">定金金额：</span>
                <span class="order-value">¥{{ formatPrice(item.order.depositAmount) }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">尾款金额：</span>
                <span class="order-value">¥{{ formatPrice(item.order.balanceAmount) }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">定金支付时间：</span>
                <span class="order-value">{{ item.order.depositPayTime ? formatTime(item.order.depositPayTime) : '未支付' }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">尾款支付时间：</span>
                <span class="order-value">{{ item.order.balancePayTime ? formatTime(item.order.balancePayTime) : '未支付' }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">支付方式：</span>
                <span class="order-value">{{ item.order.paymentMethod || '无' }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">物流公司：</span>
                <span class="order-value">{{ item.order.logisticsCompany || '未发货' }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">物流单号：</span>
                <span class="order-value">{{ item.order.logisticsNo || '未发货' }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">下单时间：</span>
                <span class="order-value">{{ formatTime(item.order.createTime) }}</span>
              </div>
              <div class="order-item">
                <span class="order-label">最后更新：</span>
                <span class="order-value">{{ formatTime(item.order.updateTime) }}</span>
              </div>
            </div>

            <!-- 确认发货按钮（仅订单状态为3时显示） -->
            <div class="order-action" v-if="item.order.orderStatus === 3">
              <el-button 
                type="primary" 
                icon="el-icon-truck"
                @click="openShipDialog(item.order)"
                class="ship-btn"
              >
                确认发货
              </el-button>
            </div>
          </div>
        </div>

        <!-- 设备图片预览 -->
        <div class="section equipment-media">
          <h3 class="section-title">设备图片</h3>
          <div class="image-preview">
            <el-image
              v-for="(img, imgIndex) in item.equipmentImages"
              :key="img.imageId + imgIndex"
              :src="img.imageUrl"
              :preview-src-list="getAllImageUrls(item.equipmentImages)"
              class="preview-img"
              fit="contain"
              :alt="`设备图片${imgIndex + 1}`"
            />
            <div class="no-image" v-if="item.equipmentImages.length === 0">
              <el-icon class="no-image-icon"><PictureFilled /></el-icon>
              <span>暂无设备图片</span>
            </div>
          </div>
        </div>

        <!-- 设备视频播放 -->
        <div class="section equipment-video" v-if="item.equipmentVideo">
          <h3 class="section-title">设备视频</h3>
          <el-dialog
            title="设备视频播放"
            v-model:visible="videoDialogVisible"
            width="80%"
            append-to-body
          >
            <video 
              :src="currentVideoUrl" 
              controls 
              class="video-player"
              width="100%"
              poster="https://picsum.photos/1200/675"
            >
              您的浏览器不支持视频播放
            </video>
          </el-dialog>
          <el-button 
            type="primary" 
            :icon="VideoCamera" 
            @click="openVideoDialog(item.equipmentVideo.videoUrl)"
            class="play-video-btn"
          >
            播放视频
          </el-button>
          <span class="video-info ml-2">
            视频名称：{{ item.equipmentVideo.videoName }} | 
            大小：{{ formatFileSize(item.equipmentVideo.videoSize) }}
          </span>
        </div>

        <!-- 设备详细描述 -->
        <div class="section equipment-description">
          <h3 class="section-title">设备描述</h3>
          <el-card class="description-card">
            <p class="description-content">{{ item.description || '暂无设备详细描述' }}</p>
          </el-card>
        </div>

        <!-- 联系信息 -->
        <div class="section equipment-contact">
          <h3 class="section-title">联系信息</h3>
          <div class="contact-info">
            <div class="contact-item">
              <el-icon class="contact-icon"><UserFilled /></el-icon>
              <span class="contact-label">联系人：</span>
              <span class="contact-value">{{ item.contactName || '未填写' }}</span>
            </div>
            <div class="contact-item">
              <el-icon class="contact-icon"><PhoneFilled /></el-icon>
              <span class="contact-label">联系电话：</span>
              <span class="contact-value">{{ item.contactPhone || '未填写' }}</span>
            </div>
          </div>
        </div>

        <!-- 操作日志 + 查看砍价按钮 -->
        <div class="section equipment-log">
          <div class="log-header">
            <h3 class="section-title">操作日志</h3>
            <el-button 
              type="primary" 
              size="small" 
              icon="el-icon-chat-line-round"
              @click="openBargainDialog(item.equipmentId)"
              class="view-bargain-btn"
            >
              查看砍价列表
            </el-button>
          </div>
          <div class="log-info">
            <div class="log-item">
              <span class="log-label">发布时间：</span>
              <span class="log-value">{{ formatTime(item.releaseTime) }}</span>
            </div>
            <div class="log-item">
              <span class="log-label">审核时间：</span>
              <span class="log-value">{{ item.auditTime ? formatTime(item.auditTime) : '未审核' }}</span>
            </div>
            <div class="log-item">
              <span class="log-label">最后更新：</span>
              <span class="log-value">{{ formatTime(item.updateTime) }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 砍价列表对话框 -->
    <el-dialog
      title="设备砍价列表"
      v-model="bargainDialogVisible"
      width="900px"
      :close-on-click-modal="false"
      class="custom-bargain-dialog"
      :show-close="false"
      :close-on-press-escape="true" 
      append-to-body  
    >
      <!-- 对话框头部 -->
      <div class="dialog-header">
        <h3 class="dialog-title">设备砍价列表</h3>
        <el-button 
          type="text" 
          icon="el-icon-close" 
          class="close-btn"
          @click="bargainDialogVisible = false"
          aria-label="关闭"
        />
      </div>

      <!-- 砍价列表内容 -->
      <div class="bargain-content">
        <!-- 加载状态 -->
        <el-skeleton v-if="bargainLoading" :count="4" class="bargain-skeleton" />

        <!-- 无砍价记录 -->
        <el-empty 
          v-else-if="bargainList.length === 0" 
          description="暂无用户提交的砍价意向"
          class="bargain-empty"
        />

        <!-- 砍价表格 -->
        <el-table 
          v-else 
          :data="bargainList" 
          border 
          stripe 
          class="bargain-table"
          :cell-style="{ 'font-size': '14px' }"
          :header-cell-style="{ 'font-size': '14px', 'font-weight': 600 }"
        >
          <el-table-column label="砍价ID" prop="bargainId" width="80" align="center" />
          <el-table-column label="用户ID" prop="userId" width="80" align="center" />
          <el-table-column label="原价(元)" prop="originalPrice" width="120" align="center">
            <template #default="scope">{{ formatPrice(scope.row.originalPrice) }}</template>
          </el-table-column>
          <el-table-column label="意向价格(元)" prop="intentionPrice" width="120" align="center">
            <template #default="scope">{{ formatPrice(scope.row.intentionPrice) }}</template>
          </el-table-column>
          <el-table-column label="用户备注" prop="bargainRemark" align="center" width="200">
            <template #default="scope">{{ scope.row.bargainRemark || '无' }}</template>
          </el-table-column>
          <el-table-column label="砍价状态" prop="bargainStatus" width="100" align="center">
            <template #default="scope">
              <el-tag :type="getBargainStatusTagType(scope.row.bargainStatus)">
                {{ getBargainStatusText(scope.row.bargainStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商家回复" prop="sellerReply" align="center" width="200">
            <template #default="scope">{{ scope.row.sellerReply || '无' }}</template>
          </el-table-column>
          <el-table-column label="提交时间" prop="createTime" width="180" align="center">
            <template #default="scope">{{ formatTime(scope.row.createTime) }}</template>
          </el-table-column>
          <el-table-column label="回复时间" prop="replyTime" width="180" align="center">
            <template #default="scope">{{ scope.row.replyTime ? formatTime(scope.row.replyTime) : '未回复' }}</template>
          </el-table-column>
          <el-table-column label="操作" width="160" align="center">
            <template #default="scope">
              <div class="operate-btn-group">
                <el-button 
                  type="success" 
                  size="mini" 
                  icon="el-icon-check"
                  @click="handleAgree(scope.row)"
                  :disabled="scope.row.bargainStatus === 1"
                >
                  同意
                </el-button>
                <el-button 
                  type="danger" 
                  size="mini" 
                  icon="el-icon-close"
                  @click="handleRefuse(scope.row)"
                  :disabled="scope.row.bargainStatus === 1"
                  class="ml-2"
                >
                  拒绝
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 回复砍价对话框 -->
      <el-dialog
        title="回复砍价"
        v-model="replyDialogVisible"
        width="500px"
        :close-on-click-modal="false"
        class="reply-dialog"
        append-to-body
        :close-on-press-escape="true" 
      >
        <el-form :model="replyForm" :rules="replyRules" ref="replyFormRef" label-width="100px">
          <el-form-item label="处理结果" class="form-item">
            <el-tag :type="replyForm.bargainStatus === 1 ? 'success' : 'danger'">
              {{ replyForm.bargainStatus === 1 ? '同意砍价' : '拒绝砍价' }}
            </el-tag>
          </el-form-item>
          <el-form-item label="用户意向价" class="form-item">
            <span class="price-text">¥{{ formatPrice(currentBargain.intentionPrice) }}</span>
          </el-form-item>
          <el-form-item label="商家回复" prop="sellerReply" class="form-item">
            <el-input
              v-model="replyForm.sellerReply"
              type="textarea"
              :rows="3"
              placeholder="请输入回复内容（可选）"
              class="reply-textarea"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="replyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitReply">确认回复</el-button>
        </template>
      </el-dialog>
    </el-dialog>

    <!-- 确认发货对话框（新增） -->
    <el-dialog
      title="确认发货"
      v-model="shipDialogVisible"
      width="500px"
      :close-on-click-modal="false"
      class="ship-dialog"
      append-to-body
      :close-on-press-escape="true"
    >
      <el-form :model="shipForm" :rules="shipRules" ref="shipFormRef" label-width="100px">
        <el-form-item label="订单编号" class="form-item">
          <span class="order-id-text">{{ currentOrder.orderId }}</span>
        </el-form-item>
        <el-form-item label="物流公司" prop="logisticsCompanyVo" class="form-item">
          <el-input
            v-model="shipForm.logisticsCompanyVo"
            placeholder="请输入物流公司名称"
            class="ship-input"
          />
        </el-form-item>
        <el-form-item label="物流单号" prop="logisticsNoVo" class="form-item">
          <el-input
            v-model="shipForm.logisticsNoVo"
            placeholder="请输入物流单号"
            class="ship-input"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="shipDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitShip">确认提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, unref, watch } from 'vue';
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import { 
  PictureFilled, VideoCamera, UserFilled, PhoneFilled, 
  ChatLineRound, Close, Check 
} from '@element-plus/icons-vue';

import { 
  ElPageHeader, ElSkeleton, ElEmpty, ElCard, ElTag, ElImage, 
  ElButton, ElDialog, ElTable, ElTableColumn, ElForm, ElFormItem,
  ElInput, ElMessage, ElMessageBox 
} from 'element-plus';
import 'element-plus/dist/index.css';

const counterStore = useCounterStore();
const equipmentData = ref([]);
const isLoading = ref(false);
const videoDialogVisible = ref(false);
const currentVideoUrl = ref('');

// 砍价相关变量
const bargainDialogVisible = ref(false);
const currentEquipmentId = ref('');
const bargainList = ref([]);
const bargainLoading = ref(false);
const replyDialogVisible = ref(false);
const currentBargain = ref({});
const replyFormRef = ref(null);

// 回复表单数据
const replyForm = reactive({
  bargainStatus: 1,
  sellerReply: ''
});

// 回复表单验证规则
const replyRules = reactive({
  sellerReply: [
    { max: 200, message: '回复内容不能超过200个字符', trigger: 'blur' }
  ]
});

// 发货相关变量（新增）
const shipDialogVisible = ref(false);
const currentOrder = ref({});
const shipFormRef = ref(null);

// 发货表单数据（新增）
const shipForm = reactive({
  oId: '',
  orderStatusVo: 4,
  logisticsCompanyVo: '',
  logisticsNoVo: ''
});

// 发货表单验证规则（新增）
const shipRules = reactive({
  logisticsCompanyVo: [
    { required: true, message: '请输入物流公司名称', trigger: 'blur' },
    { max: 50, message: '物流公司名称不能超过50个字符', trigger: 'blur' }
  ],
  logisticsNoVo: [
    { required: true, message: '请输入物流单号', trigger: 'blur' },
    { max: 50, message: '物流单号不能超过50个字符', trigger: 'blur' }
  ]
});

onMounted(() => {
  getEqById();
});

// 获取卖家设备列表
async function getEqById() {
  if (!counterStore.userId) {
    ElMessage.warning('用户未登录，请先登录');
    return;
  }

  isLoading.value = true;
  try {
    const res = await axios.get(`/eduservice/equipment/getEquipmentByUserId/${counterStore.userId}`);
    equipmentData.value = res.data.success ? res.data.data.list : [];
    console.log('我的卖出设备数据：', equipmentData.value);
  } catch (error) {
    console.error('查询设备数据失败：', error);
    ElMessage.error('查询设备失败，请稍后重试');
    equipmentData.value = [];
  } finally {
    isLoading.value = false;
  }
}

// 打开砍价列表对话框
const openBargainDialog = async (equipmentId) => {
  currentEquipmentId.value = equipmentId;
  bargainDialogVisible.value = true;
  await getBargainList(equipmentId);
};

// 获取设备砍价列表
const getBargainList = async (equipmentId) => {
  bargainLoading.value = true;
  try {
    const res = await axios.get(`/eduservice/bargainintention/getBargainIntentionListByEquipmentId/${equipmentId}`);
    if (res.data.success && res.data.data?.list) {
      bargainList.value = res.data.data.list;
    } else {
      bargainList.value = [];
      ElMessage.warning('获取砍价列表失败：' + (res.data.message || '暂无砍价数据'));
    }
    console.log('设备砍价列表：', bargainList.value);
  } catch (error) {
    console.error('获取砍价列表失败：', error);
    bargainList.value = [];
    ElMessage.error('网络错误，获取砍价列表失败');
  } finally {
    bargainLoading.value = false;
  }
};

// 处理同意砍价
const handleAgree = (bargain) => {
  currentBargain.value = { ...bargain };
  replyForm.bargainStatus = 1;
  replyForm.sellerReply = bargain.sellerReply || '同意此价格';
  replyDialogVisible.value = true;
};

// 处理拒绝砍价
const handleRefuse = (bargain) => {
  currentBargain.value = { ...bargain };
  replyForm.bargainStatus = 2;
  replyForm.sellerReply = bargain.sellerReply || '';
  replyDialogVisible.value = true;
};

// 提交砍价回复
const submitReply = async () => {
  try {
    const formRef = unref(replyFormRef);
    if (!formRef) return;
    await formRef.validate();

    const submitData = {
      bargainId: currentBargain.value.bargainId,
      userId: currentBargain.value.userId,
      equipmentId: currentBargain.value.equipmentId,
      originalPrice: currentBargain.value.originalPrice,
      intentionPrice: currentBargain.value.intentionPrice,
      bargainRemark: currentBargain.value.bargainRemark,
      bargainStatus: replyForm.bargainStatus,
      sellerReply: replyForm.sellerReply || (replyForm.bargainStatus === 1 ? '同意此价格' : '拒绝此价格'),
      replyTime: new Date().toISOString()
    };

    console.log('提交砍价回复数据：', submitData);
    const res = await axios.put(
      '/eduservice/bargainintention/updateBargainIntentionByShangHu',
      submitData
    );

    if (res.data.success || res.data) {
      ElMessage.success('回复成功');
      replyDialogVisible.value = false;
      await getBargainList(currentEquipmentId.value);
    } else {
      ElMessage.error('回复失败，请重试');
    }
  } catch (error) {
    console.error('提交砍价回复失败：', error);
    if (error.name === 'ValidationError') {
      return;
    }
    ElMessage.error('网络错误，回复失败');
  }
};

// 打开发货对话框（新增）
const openShipDialog = (order) => {
  currentOrder.value = { ...order };
  shipForm.oId = order.orderId;
  shipForm.logisticsCompanyVo = order.logisticsCompany || '';
  shipForm.logisticsNoVo = order.logisticsNo || '';
  shipDialogVisible.value = true;
};

// 提交发货信息（新增）
const submitShip = async () => {
  try {
    const formRef = unref(shipFormRef);
    if (!formRef) return;
    await formRef.validate();

    const submitData = {
      oId: shipForm.oId,
      orderStatusVo: shipForm.orderStatusVo,
      logisticsCompanyVo: shipForm.logisticsCompanyVo,
      logisticsNoVo: shipForm.logisticsNoVo
    };

    console.log('提交发货信息：', submitData);
    const res = await axios.put(
      '/eduservice/order/addOrderShouHuo',
      submitData
    );

    if (res.data.success || res.data) {
      ElMessage.success('发货成功！');
      shipDialogVisible.value = false;
      // 刷新设备列表
      await getEqById();
    } else {
      ElMessage.error('发货失败：' + (res.data.message || '请稍后重试'));
    }
  } catch (error) {
    console.error('提交发货信息失败：', error);
    if (error.name === 'ValidationError') {
      return;
    }
    ElMessage.error('网络错误，发货失败');
  }
};

// 设备状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '未审核',
    1: '已上架',
    2: '已下架',
    3: '已成交'
  };
  return statusMap[status] || '未知状态';
};

// 设备状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'warning',
    3: 'primary'
  };
  return typeMap[status] || 'default';
};

// 砍价状态文本
const getBargainStatusText = (status) => {
  const statusMap = {
    0: '未回复',
    1: '已同意',
    2: '已拒绝'
  };
  return statusMap[status] || '未知状态';
};

// 砍价状态标签类型
const getBargainStatusTagType = (status) => {
  const typeMap = {
    0: 'info',
    1: 'success',
    2: 'danger'
  };
  return typeMap[status] || 'default';
};

// 订单状态文本（新增）
const getOrderStatusText = (status) => {
  const statusMap = {
    0: '待支付定金',
    1: '已支付定金',
    2: '待支付尾款',
    3: '已支付尾款',
    4: '已发货',
    5: '已收货',
    6: '已完成',
    7: '已取消'
  };
  return statusMap[status] || '未知状态';
};

// 订单状态标签类型（新增）
const getOrderStatusTagType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'info',
    2: 'warning',
    3: 'success',
    4: 'primary',
    5: 'primary',
    6: 'success',
    7: 'danger'
  };
  return typeMap[status] || 'default';
};

// 价格格式化
const formatPrice = (price) => {
  if (!price) return '0.00';
  return Number(price).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  });
};

// 时间格式化
const formatTime = (timeStr) => {
  if (!timeStr) return '暂无';
  const date = new Date(timeStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 文件大小格式化
const formatFileSize = (size) => {
  if (!size) return '0B';
  if (size >= 1024 * 1024) {
    return (size / (1024 * 1024)).toFixed(2) + 'MB';
  } else if (size >= 1024) {
    return (size / 1024).toFixed(2) + 'KB';
  } else {
    return size + 'B';
  }
};

// 获取所有图片URL
const getAllImageUrls = (images) => {
  return images.map(img => img.imageUrl);
};

// 打开视频对话框
const openVideoDialog = (videoUrl) => {
  currentVideoUrl.value = videoUrl;
  videoDialogVisible.value = true;
};

// 查看检测报告
const viewReport = (reportId) => {
  ElMessage.info(`检测报告ID：${reportId}，跳转至报告详情页`);
};
</script>

<style scoped>
.equipment-detail-container {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #fafafa;
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #eee;
}

/* 加载状态 */
.loading-skeleton {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
}

/* 空状态 */
.empty-state {
  padding: 48px 0;
  text-align: center;
}

/* 设备列表容器 */
.equipment-list {
  display: grid;
  gap: 24px;
}

/* 设备卡片 */
.equipment-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.equipment-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* 设备标题栏 */
.equipment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}

.equipment-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  display: flex;
  align-items: center;
}

.status-tag {
  font-size: 12px;
  padding: 2px 8px;
}

.equipment-price {
  font-size: 18px;
  font-weight: 600;
  color: #ff4d4f;
}

/* 通用区块样式 */
.section {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding-left: 8px;
  border-left: 3px solid #1890ff;
}

/* 基本信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  line-height: 1.6;
}

.info-label {
  color: #666;
  width: 90px;
  font-size: 14px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* 订单信息样式（新增） */
.equipment-order {
  background-color: #f9f9f9;
}

.order-info-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.order-item {
  display: flex;
  align-items: center;
  line-height: 1.8;
}

.order-label {
  color: #666;
  width: 100px;
  font-size: 14px;
  flex-shrink: 0;
}

.order-value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

.order-action {
  text-align: right;
  padding-top: 10px;
  border-top: 1px dashed #f0f0f0;
}

.ship-btn {
  padding: 8px 24px;
}

/* 图片预览区 */
.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.preview-img {
  width: 180px;
  height: 140px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

.preview-img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.no-image {
  width: 180px;
  height: 140px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  background-color: #f9f9f9;
}

.no-image-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

/* 视频播放区 */
.equipment-video {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.play-video-btn {
  align-self: flex-start;
}

.video-info {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.video-player {
  border-radius: 8px;
  width: 100%;
  max-height: 500px;
}

/* 描述区域 */
.description-card {
  border: 1px solid #f0f0f0;
  background-color: #f9f9f9;
}

.description-content {
  color: #666;
  line-height: 1.8;
  margin: 0;
  padding: 16px;
  font-size: 14px;
  white-space: pre-line;
}

/* 联系信息区 */
.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 4px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  color: #666;
  line-height: 1.6;
}

.contact-icon {
  margin-right: 8px;
  color: #1890ff;
  font-size: 16px;
}

.contact-label {
  width: 70px;
  font-size: 14px;
  flex-shrink: 0;
}

.contact-value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* 操作日志 + 查看砍价按钮 */
.equipment-log {
  position: relative;
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.view-bargain-btn {
  padding: 6px 16px;
  border-radius: 6px;
}

.log-info {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 4px 0;
}

.log-item {
  display: flex;
  align-items: center;
  color: #666;
  line-height: 1.6;
}

.log-label {
  width: 90px;
  font-size: 14px;
  flex-shrink: 0;
}

.log-value {
  color: #333;
  font-size: 14px;
  flex: 1;
}

/* 报告按钮 */
.report-btn {
  color: #1890ff;
  padding: 0;
  height: auto;
  font-size: 14px;
}

.report-btn:hover {
  color: #096dd9;
  background: transparent;
}

/* 砍价列表对话框样式 */
.custom-bargain-dialog {
  --el-dialog-border-radius: 12px;
  --el-dialog-box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 1001 !important;
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-title {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
  margin: 0;
}

.close-btn {
  color: #999;
  font-size: 18px;
  transition: color 0.3s;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.close-btn:hover {
  color: #1890ff;
  background-color: #f0f7ff;
}

.bargain-content {
  padding: 24px;
  max-height: 60vh;
  overflow-y: auto;
}

.bargain-skeleton {
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.bargain-empty {
  padding: 48px 0;
  text-align: center;
}

.bargain-table {
  --el-table-header-text-color: #333;
  --el-table-row-hover-bg-color: #f5fafe;
  border-radius: 8px;
  overflow: hidden;
}

.operate-btn-group {
  display: flex;
  justify-content: center;
}

/* 回复砍价对话框样式 */
.reply-dialog {
  --el-dialog-border-radius: 10px;
  --el-dialog-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1002 !important;
}

/* 发货对话框样式（新增） */
.ship-dialog {
  --el-dialog-border-radius: 10px;
  --el-dialog-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1003 !important;
}

.form-item {
  margin-bottom: 20px;
}

.price-text {
  font-size: 14px;
  color: #ff4d4f;
  font-weight: 500;
}

.reply-textarea {
  border-radius: 6px;
  resize: none;
  transition: all 0.3s;
}

.reply-textarea:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.ship-input {
  border-radius: 6px;
  transition: all 0.3s;
}

.ship-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.order-id-text {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .info-grid, .order-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .custom-bargain-dialog {
    width: 95% !important;
  }

  .bargain-table {
    font-size: 13px;
  }

  .el-table-column {
    width: auto !important;
  }
}

@media (max-width: 768px) {
  .equipment-detail-container {
    padding: 16px;
  }

  .equipment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
  }

  .section {
    padding: 16px;
  }

  .info-grid, .order-grid {
    grid-template-columns: 1fr;
  }

  .preview-img, .no-image {
    width: 100%;
    height: auto;
    max-width: 240px;
  }

  .contact-info, .log-info {
    flex-direction: column;
    gap: 12px;
  }

  .log-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .reply-dialog, .ship-dialog {
    width: 95% !important;
  }

  .order-action {
    text-align: left;
  }
}
</style>